<template>
	<view class="container">
		<view class="container2">
			<view class="header">
				信息填写页面
			</view>
			<view class="datail">
				<view class="item">
					请您仔细填写孩子的信息，一旦缴费，不可修改，如有问题请咨询老师
				</view>
				<view class="item">
					<view class="title">
						<view class="col">

						</view>
						学生姓名：
					</view>
					<view class="">
						<input v-model="info.studentName" type="text" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<view class="col">

						</view>
						应上年级：
					</view>
					<view class="uni-form-item uni-column">
						<picker @change="bindPickerChange" :range="array">
							<label>请选择：</label>
							<label class="gragde">{{info.grade}}</label>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="title">
						<view class="col">

						</view>
						家长姓名：
					</view>
					<view class="">
						<input v-model="info.parentName" type="text" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<view class="col">

						</view>
						联系电话：
					</view>
					<view class="">
						<input v-model="info.phoneNumber" placeholder="电话号码" type="text" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<view class="col">

						</view>
						家庭住址：
					</view>
					<view class="">
						<input v-model="info.address" type="text" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<view class="col">

						</view>
						备注：
					</view>
				</view>
				<view class="texta">
					<textarea v-model="info.question" name="" id="" cols="30" rows="10" placeholder="请写下您要咨询的问题"></textarea>
				</view>
			</view>
			
			<view class="controller">
				<button @click="back">返回</button>
				<button @click="submit"  style="background-color: skyblue;">下一步</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				array: ["一年级","二年级","三年级","四年级","五年级","六年级","七年级","七年级","八年级","九年级","高一"],
				info:{
					grade:"请选择年级",
					studentName:"",
					address:"",
					parentName:"",
					phoneNumber:"",
					question:""
				}
				
			};
		},
		onLoad() {
		},
		methods: {
			bindPickerChange: function(e) { //改变的事件名
				this.index = e.detail.value //将数组改变索引赋给定义的index变量
				this.info.grade = this.array[this.index] //将array【改变索引】的值赋给定义的jg变量
			},
			back(){
				uni.navigateBack({
					
				})
			},
			submit(){
				//先检查参数
				if(this.info.address==""||this.info.grade==""||this.info.grade==null||this.info.parentName==""||this.info.phoneNumber==""||this.info.studentName==""){
					uni.showToast({
						title:"请填写完全",
						icon:'error',
						duration:2000
					})
					// return;
				}
				let student=JSON.stringify(this.info);
				uni.navigateTo({
					url:'/pages/sign2/sign2?infostudent=' + encodeURIComponent(student),
				})
			}
		},
	};
</script>
<style scoped>
	.uni-form-item picker {
		border-style: groove;
		width: 100%;
		height: 60rpx;
		text-indent: 20rpx;
		border-radius: 10rpx;
		/* background-color: aliceblue; */
		font-size: 23px;
	}

	.datail .item:nth-child(1) {
		font-size: 20px;
		border-bottom-style: groove;
		color: #ff5c67;
	}

	page {
		background-color: #c4dfff;
	}

	.container2 .datail {
		background-color: #ffffff;
		padding-bottom: 50rpx;
	}

	.controller {
		margin-top: 100rpx;
		display: flex;
	}

	
	.controller button{
		width: 40%;
		background-color: #ffa7a9;
		margin-bottom: 50rpx;
	}

	.controller button:active{
		background-color: #ff5762;
	}
	.texta {
		display: flex;
		justify-content: center;
	}

	.texta textarea {
		width: 90%;
		background-color: #ffffff;
		height: 200rpx;
		border-style: groove;
		border-radius: 10rpx;
		text-indent: 10rpx;
		font-size: 20px;
	}

	.container2 {
		width: 90%;
		/* background-color: white; */
		height: 90%;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.container .header {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		background-color: #d2d9d7;
	}

	.container {
		/* width: 100%; */
		/* background-image: url("/static/background1.jpg"); */
		/* padding: 20rpx; */
		background-color: #c4dfff;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.container .item {
		width: 90%;
		height: 120rpx;
		/* display: flex; */
		justify-content: left;
		/* align-items: center; */
		font-size: 23px;
		padding: 20rpx;
		margin-bottom: 30rpx;
		/* border-bottom-style: groove; */
		margin-bottom: 15rpx;
	}

	.container .item .title {
		width: 100%;
		margin-bottom: 30rpx;
		display: flex;
	}

	.container .item .title .col {
		width: 30rpx;
		height: 50rpx;
		background-color: rgb(7, 150, 227);
		border-radius: 10rpx;
		margin-right: 10rpx;
	}


	.container .item select {
		width: 100%;
		height: 60rpx;
		text-indent: 20rpx;
		border-radius: 10rpx;
		font-size: 23px;
	}

	.container .item input {
		border-style: groove;
		width: 100%;
		height: 60rpx;
		text-indent: 20rpx;
		border-radius: 10rpx;
		/* background-color: aliceblue; */
		font-size: 23px;

	}

	.container .item textarea {
		border-style: groove;
	}
</style>